<!-- 校区状态 -->
<template>
  <div class="dashboard-editor-container">
    <div class="xxx" style="margin-top: 10px;">
      <div style="display:flex;justify-content:space-between;">
        <partitionTree :nodeData="nodeData" :addTemplate="false" @handleNodeClick="handleNodeClick" ref="partitionTree" @toggleVisibility="toggleVisibility"></partitionTree>
        <div :style="{ width:containerWidth}"  class="box" style="background:#fff;border: 1px solid #ddd;border-radius: 4px;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);">
          <!-- <el-button type="primary" @click="addModer">添加校区</el-button> -->
          <!-- <tree-transfer></tree-transfer> -->
          <connsearch ref="connsearch" :formOptions="formOptions" @search="search" @reset="reset">
            <el-button type="warning" size="small" @click="restart_Device(false)">批量远程操作</el-button>
          </connsearch>
          <el-table stripe border :data="tableData" style="width: 100%; margin-top: 15px" height="640px" ref="table">
            <el-table-column label="序号" width="80" type="index" :index='(index) => { return (index + 1) + (pageNum - 1) * pageSize }'> </el-table-column>
            <!-- <el-table-column label="所在分区" prop="Department" width="80"  show-overflow-tooltip></el-table-column> -->
            <el-table-column label="所在分区" prop="PrimArea" width="160"  show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.PrimArea }} / {{ row.SecondArea }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="校区编码" prop="SchoolID"   show-overflow-tooltip></el-table-column> -->
            <el-table-column label="校区名称" prop="SchoolName" width="140"  show-overflow-tooltip></el-table-column>
            <el-table-column label="在线状态" prop="StatusChangeTime" width="180"  show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>
                  <span style="color:#67C23A" v-if="row.Status === 1" type="success">在线</span>
                  <span style="color:#F56C6C" v-if="row.Status !== 1" type="danger">离线</span>
                  <span v-if="!row.LastReportStatusTime || !row.StatusChangeTime">--初始化</span>
                  <span v-else-if="row.StatusChangeTime_redo">--{{row.StatusChangeTime_redo}}</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="运行时长" prop="KeepRunningTime" width="120"  show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.KeepRunningTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设备版本" prop="Version" width="100"  show-overflow-tooltip></el-table-column>
            <el-table-column label="资产状态" width="130" prop="OnlineDeviceCount"  show-overflow-tooltip>
              <template slot-scope="{row}">
                {{ row.OnlineDeviceCount }} / {{row.DeviceTotal}} 
              </template>
            </el-table-column>
            <el-table-column label="公网地址" prop="FromIP" width="140"  show-overflow-tooltip></el-table-column>
            <el-table-column label="内网地址" prop="CurrentIP"   show-overflow-tooltip></el-table-column>
            <!-- <el-table-column label="今日事件" prop="TodayEventCount" width="80"  show-overflow-tooltip></el-table-column> -->
            
            <!-- <el-table-column label="今日事件" prop="TodayEventCount"  show-overflow-tooltip></el-table-column> -->
            <el-table-column label="操作" width="170px"  fixed="right" >
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="LookDetails(scope.row)">详情</el-button>
                <el-button :type="scope.row.Status === 1 ? 'warning' : 'info'" size="mini" :disabled="scope.row.Status !== 1" @click="operateDevice(scope.row)">远程操作</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination 
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" 
            :current-page=pageNum
            :page-size=pageSize
            background 
            layout="total, prev, pager, sizes, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog v-el-drag-dialog  :fullscreen="dialogFull"  title="批量远程操作" :close-on-click-modal="false" :visible.sync="dialogDeviceVisible" width="40%">
      <template slot="title">
        <div class="avue-crud__dialog__header">
            <span class="el-dialog__title">
              批量远程操作
            </span>
          <div class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true">
            <i class="el-icon-full-screen"   v-if="dialogFull == false"/>
            <i class="el-icon-copy-document" v-else/>
          </div>
        </div>
      </template>
      <span  style="display:flex;margin-bottom:15px;justify-content: center;width:100%;">
        <span style="display: flex;justify-content: center;align-items: center;">远程命令：</span>
        <div style="display:flex;flex:1" >
          <el-select v-model="selectedOption" placeholder="请选择操作" @change="handleSelectChange(selectedOption)">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select> 
        <el-input v-if="show_shell" type="text" maxlength ="200"  clearable :placeholder="selectedOption == 103 ?'请输入具体地址(例如ip/子网掩码)': '请输入具体指令'" v-model="ShellCmd"  style="margin-left:10px;flex:1"/> 
        <el-tooltip content="编辑指令" placement="top" v-if="show_shell">
          <i v-if="show_shell" class="el-icon-document" style="font-size:18px;cursor: pointer;display: flex;justify-content: center;align-items: center;" @click="editShell"> </i>
        </el-tooltip>
        </div>
      </span>
      <tree-transfer 
          :openAll="true"
          :title="['待选择','已选择']"
          :from_data='fromData' 
          :to_data='toData'               
          :defaultProps="{label:'label'}"
          ref="myTransfer" 
          :transferOpenNode="true"
          @add-btn='addSelect' 
          @remove-btn='removeSelect'
          :height="dialogFull? '640px':'320px'"
          filter     
          >  
      </tree-transfer>
      <span  style="display:flex;margin-top:15px;justify-content: center;width:100%;">
        <span style="display: flex;justify-content: center;align-items: center;">操作设备：</span>
        <span style="flex: 1;">
          <el-input type="textarea"   :autosize="{ minRows: 1, maxRows: 3}" resize="none" v-model="selectInfo" disabled />
        </span>
      </span>
      
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="dialogDeviceVisible = false">取 消</el-button>
        <!-- , reSource = [], $set(reSource, 'isSelected', false)" -->
      </span>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape=false
      title="编辑指令"
      :visible.sync="editShow"
      v-el-drag-dialog
      width="40%"
    >
      <el-input
        type="textarea"
        :rows="5"
        placeholder="请输入具体指令"
        v-model="ShellCmd"
        maxlength="200"
        show-word-limit
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="editShow = false">确 定</el-button>
    </span>
    </el-dialog>
    <!-- 百度地图组件 -->
    <baiduMap ref="baiduMap" :infoWindow='infoWindow'></baiduMap>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import connsearch from "@/components/connSearch";
import treeTransfer from 'el-tree-transfer'
import { connrequest, GetEventLog } from '@/api/firstPage'
import { parseTime, getuuid, recursiveGetNodePath, recursiveGetChildNodePath,formatDuration,getNowDay,formatTime2,formatBytes_back } from '@/utils/index'
import elDragDialog from "@/directive/el-drag-dialog"; 
import partitionTree from "@/components/partitionTree"; 
import baiduMap from "./components/baiduMap"; 
export default {
  // directives: { elDragDialog ,treeTransfer},
  directives: { elDragDialog , treeTransfer},
  components: {
    partitionTree,connsearch,treeTransfer,baiduMap
  },
  data() {
    let that = this
    return {  
      infoWindow: {
        title: '',
        contents: '经纬度查询',
        show: false,
        lng: '',
        lat: '' 
      },
      ShellCmd:'',
      editShow:false,
      selectInfo:'',
      show_shell:false,
      dialogFull:false,
      activeTab:'tab1',
      pageNum: 1,
      pageSize: 10,
      assertsForm:[],
      pageNum_assets: 1,
      pageSize_assets: 10,
      Device_pageNum: 1,
      Device_pageSize: 10,
      pageSize: 10,
      total: 0,
      assets_total:0,
      containerWidth: 'calc(100% - 275px)',
      tableData: [],
      nodeData: [],
      Action: 1,
      Moder: {},
      dialogTableVisible: false,
      dialogDeviceVisible: false,
      reSource: [],
      partitionList: [],
      choseArea: {},
      rules:{
        SchoolID: [
          {required: true, message: '请选择校区编码', trigger: 'blur'}
        ],
        SchoolName: [
          {required: true, message: '请选择校区名称', trigger: 'blur'}
        ],
        PrimArea: [
          {required: true, message: '请选择上级分区', trigger: 'change'}
        ],
        SecondArea: [
          {required: true, message: '请输入分区名称', trigger: 'blur'}
        ],
        AreaCode: [
          {required: true, message: '请输入分区编码', trigger: 'blur'}
        ],
        ClassName: [
          {required: true, message: '请输入教室', trigger: 'blur'}
        ],
        Phone: [
          {required: true, message: '请输入联系电话', trigger: 'blur'},
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false && value) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        DeviceClass: [
          {required: true, message: '请选择操作系统', trigger: 'change'}
        ],
        DeviceType: [
          {required: true, message: '请选择资产类型', trigger: 'change'}
        ]
      },
      searchform:{},
      formOptions: [
        {
          col: 4,
          hidden: false,
          label: "在线状态", // label文字
          prop: "Status", // 字段名
          element: "el-select", // 指定elementui组件
          initValue: 0, // 字段初始值,
          placeholder: "请选择在线状态", // elementui组件属性
          options: [
            { label: '全部', value: 0 },
            { label: '在线', value: 1 },
            { label: '离线', value: 2 }
          ],
          rules: [], // elementui组件属性
          events: {
            input(val) {
              that.searchform.Status = val
            }
          }
        },
        
        {
          col: 8,
          label: "校区名称关键字", // label文字
          labelWidth:'150px',
          prop: "SchoolName", // 字段名
          element: "el-input", // 指定elementui组件
          placeholder: "请输入描述信息,支持模糊查询。", // elementui组件属性
          maxlength: 50,
          events: {
            input(val) {
              that.searchform.SchoolName = val
            }
          }
        },
        {
          col: 4,
          hidden: false,
          label: "排序字段", // label文字
          prop: "Sort_value", // 字段名
          element: "el-select", // 指定elementui组件
          initValue: "Status", // 字段初始值,
          placeholder: "请选择排序字段", // elementui组件属性
          options: [
            { label: '校区名称', value: 'SchoolName' },
            { label: '在线状态', value: 'Status' },
            { label: '运行时长', value: 'KeepRunningTime' }
          ],
          events: {
            input(val) {
              that.searchform.Sort_value = val
            }
          }
        }
      ],
      dialogForm:[],
      eventTable:[],
      EventpageNum: 1,
      EventpageSize: 10,
      EventTotal:0,
      total: 0,
      arr_divece:[],
      selectedSchools: [], // 存放选中学校的数组
      loading: false,
      fromData: [], // 存储传输的数据
      toData:[],
      lastLevelLeafNodes: [],
      selectedOption: 100, // 设置默认选择第一个选项
      options: [
        { label: '重启设备', value: 100 },
        { label: '强制同步资产', value: 102 },
        { label: '开启网络穿透服务', value: 103 },
        { label: '停止网络穿透服务', value: 104 },
        { label: '执行指定命令', value: 105 }
      ],
      eventList: [],
      jsonData: {},
      operatedevice:{},
      schoolMap:''
    }
  },
  //生命周期 - 创建完成（访问当前this实例） 
  created() {
    this.pageSize = (Cookies.get('Zhuoguan_DefaultPageLength') || 10) * 1;

    this.$set(this.searchform,'Status', 0)
    this.$set(this.searchform,'Sort_value','Status' )
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.$refs.table.doLayout()

  }, 
  watch: {
      tableData(val) {
        this.doLayout();
      }
    },
  methods: {
    doLayout(){
      let that = this
        this.$nextTick(() => {
          that.$refs.table.doLayout()
        })
    },
    async getData() {
      const res = await connrequest('GetSchoolStatusSumTree')
      let partitionList = []
      res.Data.PrimName = res.Data.RootName //因为后端返回的所有分区名字叫RootName，子菜单又叫PrimAreaName, 这里做个转换
      this.RootName = res.Data.RootName
      res.Data.disabled = true
      res.Data.edit = false
      res.Data.PrimArea.map(item => {
        item.edit = false
        partitionList.push(item)
      })
      this.nodeData = [this.transformData(res.Data)]
      this.partitionList = partitionList
      this.GetDictArea(this.choseArea)
    },
    transformData(inputData) {
      const { RootName, OffLineCount, OnlineCount, PrimArea} = inputData;
        return {
          Name: RootName,
          level: 1,
          Count: `${OnlineCount} / ${OnlineCount + OffLineCount}`,
          Children: PrimArea.map(area => ({
            Name: area.PrimAreaName,
            Count: `${area.OnlineCount} / ${area.OnlineCount + area.OffLineCount}`,
            level: 2,
            Children: area.SecondArea.map(secondArea => ({
              Name: secondArea.SecondAreaName,
              Count: `${secondArea.OnlineCount} / ${secondArea.OnlineCount + secondArea.OffLineCount}`,
              level: 3,
              onlineCount: secondArea.OnlineCount,
              offLineCount: secondArea.OffLineCount
          }))
        }))
      }
    },
    process_Time(P_time)
    {
      let d = Math.floor(P_time / 3600 / 24);
      let h = Math.floor((P_time  % 86400) / 3600);
      var m = Math.floor(((P_time % 86400) % 3600) / 60);
      P_time = `${d < 1 ? '' : d}${d < 1 ? '' : '天'} ${d < 1 &&h<1? '' : h}${d < 1 &&h<1? '' : '时'} ${m}分钟`;
      return P_time
    },
    async GetDictArea(obj){
      const data = {
        Paging:{
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter:{
          PrimArea: '',
          SecondArea: "",
          SchoolName: this.searchform.SchoolName,
          Status:  this.searchform.Status,
          OrderBy: this.searchform.Sort_value,
          ...obj 
        }
      }
      const res = await connrequest('GetSchool', data) 
      res.Data.map(item => { 
        item.onlineTotal  = item.OnlineDeviceCount +item.OfflineDeviceCount
        const currentTimeStamp = new Date().getTime();
        item.Statusassert = currentTimeStamp/1000 - item.DeviceTime
        item.CreateTime = parseTime(item.CreateTime)
        item.KeepRunningTime = formatDuration(item.KeepRunningTime)
        item.Status_Time = parseTime(item.LastReportStatusTime)
        // item.StatusChangeTime_redo = formatTime2(item.StatusChangeTime)
        item.LastReportEchoTime = parseTime(item.LastReportEchoTime)
        item.StatusChangeTime_redo =currentTimeStamp/1000 > item.StatusChangeTime &&item.StatusChangeTime !=0 ? formatDuration(currentTimeStamp/1000 - item.StatusChangeTime):0
        item.DiskUsedPct = !item.Disk_Sys_Total? 0: ((item.Disk_Sys_Used / item.Disk_Sys_Total) * 100).toFixed(1) * 1
        item.DeviceTotal = item.OnlineDeviceCount + item.OfflineDeviceCount
        item.DiskUsed = formatBytes_back(item.Disk_Sys_Used)
        item.DiskTotal = formatBytes_back(item.Disk_Sys_Total)
        item.MemUsedPct = !item.Memeory_Total?0:((item.Memeory_Used / item.Memeory_Total) * 100).toFixed(1) * 1
        item.MemuSoftUsed = formatBytes_back(item.Memeory_Used)
        item.MemuSoftTotal = formatBytes_back(item.Memeory_Total)
        item.MemUsedPct = !item.Memeory_Total?0:((item.Memeory_Used / item.Memeory_Total) * 100).toFixed(1) * 1
        item.DiskSoftPct = !item.Disk_Software_Total?0:((item.Disk_Software_Used / item.Disk_Software_Total) * 100).toFixed(1) * 1
        item.DiskSoftUsed = formatBytes_back(item.Disk_Software_Used)
        item.DiskSoftTotal = formatBytes_back(item.Disk_Software_Total)
      })
      this.tableData = res.Data
      this.total = res.Paging.TotalCount
    },
    handleNodeClick(nodeData){
      const {node} = nodeData
      let arr = node.level === 1 ? recursiveGetChildNodePath(node, []) : recursiveGetNodePath(node, [])
      let obj = {}
      node.level === 1 ? '' : node.level === 2 ? obj.PrimArea = node.data.Name : obj.SecondArea = node.data.Name
      this.choseArea = obj
      this.PrimArea = arr
      this.$set(this.Moder, 'PrimArea', arr)
      this.GetDictArea(this.choseArea)
    },
    handleChange(node){
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.pageNum = 1
      this.GetDictArea(this.choseArea)
    },
    handleCurrentChange( pageNum ){
      this.pageNum = pageNum
      this.GetDictArea(this.choseArea)
    },
    toggleVisibility(isHidden) {
      if(isHidden)
        this.containerWidth = '100%';
      else 
        this.containerWidth = 'calc(100% - 275px)';
    },
    // 搜索
    search(val) {
      this.pageNum = 1
      this.searchform = {...val}
      
      this.getData()
    },
    // 重置
    reset(){
      this.searchform = {}
      this.$set(this.searchform,'Status', 0)
      this.$set(this.searchform,'Sort_value','Status' )
      this.$refs.connsearch.addInitValue()
      this.getData()
    },
    LookDetails(row) {
      this.activeTab = 'tab1'
      this.dialogForm = row
      // this.$router.push({ path: '/realTimeTraffic/campusDetail', query: { Moder: this.dialogForm } });
      this.$router.push({ path: '/realTimeTraffic/campusDetail' });
      sessionStorage.setItem('detailStatus',JSON.stringify(this.dialogForm))
    },
    operateDevice(row){
      this.operatedevice = {...row}
      this.restart_Device(true)
    },

    getLastLevelLeafNodes(nodeList) {
      for (const node of nodeList) {
        if (node.children && node.children.length) {
          this.getLastLevelLeafNodes(node.children);
        } else {
          this.lastLevelLeafNodes.push(node);
        }
      }
    },
    async submit(){
      this.getLastLevelLeafNodes(this.toData)
      var selectData = []
      selectData = this.lastLevelLeafNodes.map(item => ({
        // PrimArea: item.info[0] || '',
        // SecondArea: item.info[1] || '',
        // SchoolName: item.info[2] || '',
        SchoolID: item.info[3] || '',
        Action: this.selectedOption,
        ShellCmd:this.selectedOption == 103 || this.selectedOption == 105 ?this.ShellCmd :''
      }));
      this.lastLevelLeafNodes = []
      const data = {
        Data: [
          ...selectData
        ]
      }
      if(selectData.length === 0) {
        this.$message.info('没有选择设备')
        return
      }
      const ipWithMaskPattern = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){2}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(3[0-2]|[1-2]?[0-9])$/;
      if(this.selectedOption == 103){
        if(!ipWithMaskPattern.test(this.ShellCmd))
        {
          this.$message.info('请输入正确的IP地址格式')
          return
        }
      }
      this.$confirm('远程指令可能会导致设备侧异常，请在管理人员指导下执行。请谨慎使用。确认要对选择的校区设备下发远程操作指令吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if(this.selectedOption == 103)
        {
          this.ShellCmd = '/school/edge -c  mynetwork -k 123456  -a ' + this.ShellCmd + ' -l n2n.hunterxyz.com:8899'
          data.Data.map(item=>{
            item.ShellCmd = this.ShellCmd
          })
        }
        const res = await connrequest('CreateRemoteCtrl', data)
        if(res.Status.StatusCode === 0){
          this.$message.success('操作成功')
          this.dialogDeviceVisible = false
          this.getData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });          
      });
    },
    async restart_Device(control){
      this.jsonData = {}
      this.toData = []
      this.selectInfo = ''
      this.dialogDeviceVisible = true
      this.selectedOption = 100
      this.ShellCmd = ''
      this.show_shell=false
      const data = {
        Paging:{
          QueryPageNo: this.Device_pageNum,
          QueryPageLength: this.Device_pageSize
        },
        Filter:{
          Status: 1
        }
      }
      const res = await connrequest('GetSchool', data) 
      this.arr_divece = []
      this.schoolMap = new Map() 
      if(control)
        res.Data = res.Data.filter(item => item.SchoolName != this.operatedevice.SchoolName)
      res.Data.map(item=>{
        let arr = {}
        arr.SchoolID = item.SchoolID
        arr.PrimArea = item.PrimArea
        arr.SecondArea = item.SecondArea
        arr.SchoolName = item.SchoolName
        arr.Pid = item.SchoolID +'1'
        arr.Sid = item.SchoolID +'2'
        this.schoolMap.set(item.SchoolName, item.SchoolID);
        this.schoolMap.set(item.PrimArea, arr.Pid);
        this.schoolMap.set(item.SecondArea, arr.Sid);
        arr.Action = 1
        this.arr_divece.push(arr)
      })
      if(control)
      {
        this.schoolMap.set(this.operatedevice.SchoolName, this.operatedevice.SchoolID);
        this.schoolMap.set(this.operatedevice.PrimArea, this.operatedevice.SchoolID +'1');
        this.schoolMap.set(this.operatedevice.SecondArea, this.operatedevice.SchoolID +'2');
      }
      this.fromData = this.convertToTree(this.arr_divece)
      if(control)
      {
        var jsonData ={
          label:this.operatedevice.PrimArea,
          id:this.schoolMap.get(this.operatedevice.PrimArea),
          pid:null,
          children:[
            {
              label:this.operatedevice.SecondArea,
              id:this.schoolMap.get(this.operatedevice.SecondArea),
              pid:this.schoolMap.get(this.operatedevice.PrimArea),
              children:[
                {
                  label: this.operatedevice.SchoolName,
                  info: [this.operatedevice.PrimArea,this.operatedevice.SecondArea,this.operatedevice.SchoolName,this.operatedevice.SchoolID],
                  id: this.schoolMap.get(this.operatedevice.SchoolName),
                  pid: this.schoolMap.get(this.operatedevice.SecondArea)
                }
              ]
            }
          ]
        }
       this.toData.push(jsonData)
       this.getLeafLabels(this.toData)
       // 使用 slice 方法去除最后一个字符
       this.selectInfo = this.selectInfo.slice(0, -1)
      }
    },
    convertToTree(flatData) {
      const tree = [];
      const generateRandomId = () => Math.random().toString(36).substr(2, 9);
      flatData.forEach(item => {
        const cityNode = tree.find(node => node.label === item.PrimArea);
        if (cityNode) {
          const districtNode = cityNode.children.find(node => node.label === item.SecondArea);
          if (districtNode) {
            districtNode.children.push({
              label: item.SchoolName,
              info: [item.PrimArea,item.SecondArea,item.SchoolName,item.SchoolID],
              id: this.schoolMap.get(item.SchoolName),
              pid: this.schoolMap.get(item.SecondArea)
            });
          } else {
            cityNode.children.push({
              label: item.SecondArea,
              id: this.schoolMap.get(item.SecondArea),
              pid: this.schoolMap.get(item.PrimArea),
              children: [
                {
                  label: item.SchoolName, 
                  info: [item.PrimArea,item.SecondArea,item.SchoolName,item.SchoolID],
                  id: this.schoolMap.get(item.SchoolName),
                  pid: this.schoolMap.get(item.SecondArea)
                }
              ]
            });
          }
        } else {
          tree.push({
            label: item.PrimArea,
            id: this.schoolMap.get(item.PrimArea),
            pid: null, // Assuming the top-level node has no parent
            children: [
              {
                label: item.SecondArea,
                id: this.schoolMap.get(item.SecondArea),
                pid: this.schoolMap.get(item.PrimArea),
                children: [
                  {
                    label: item.SchoolName,
                    info: [item.PrimArea,item.SecondArea,item.SchoolName,item.SchoolID],
                    id: this.schoolMap.get(item.SchoolName),
                    pid: this.schoolMap.get(item.SecondArea)
                  }
                ]
              }
            ]
          });
        }
      });
      return tree;
    },
    handleSelectChange(val){
      if(val === 103 || val === 105) this.show_shell = true
      else this.show_shell = false 
    },
    addSelect(fromData,toData,obj){
      this.selectInfo = ''
      this.getLeafLabels(this.toData)
      // 使用 slice 方法去除最后一个字符
      this.selectInfo = this.selectInfo.slice(0, -1)
    },
    removeSelect(fromData,toData,obj){
      this.selectInfo = ''
      this.getLeafLabels(this.toData)
      // 使用 slice 方法去除最后一个字符
      this.selectInfo = this.selectInfo.slice(0, -1)
    },
     getLeafLabels(nodes) {
      for (const node of nodes) {
        if (node.children && node.children.length > 0) {
          this.getLeafLabels(node.children);
        } else {
          this.selectInfo += node.label + "、";
        }
      }
    },
    editShell(){
      this.editShow = true
    }
  }
};
</script>
<style scoped>
.box {
  background-color: lightblue;
  transition: width 0.5s; /* 添加过渡动画 */
}

.wl-transfer .transfer-title,
.wl-transfer ::v-deep .transfer-title {
  font-size: 14px !important;
  margin: 0 !important;
}
::v-deep .el-progress-bar {
  width: 70%; /* 设置进度条的宽度 */
  /* 添加其他样式属性 */
}
::v-deep .el-descriptions--medium.is-bordered .el-descriptions-item__cell{
    padding: 10px;
    width: 200px;
}
/*  dialog*/
.el-dialog__header {
  padding: 15px 20px 15px;
}
.el-dialog__headerbtn{
  top: 15px;
}
 
/* dialog header */
.avue-crud__dialog__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.el-dialog__title {
  color: rgba(0,0,0,.85);
  font-weight: 500;
  word-wrap: break-word;
}
.avue-crud__dialog__menu {
  padding-right: 35px;
  float: left;
}
.avue-crud__dialog__menu i {
  color: white;
  font-size: 15px;
}
.el-icon-full-screen{
  cursor: pointer;
}
.el-icon-full-screen:before {
  content: "\e719";
}
.el-icon-copy-document{
  cursor: pointer;
}
</style>
